<template>
  <div>
    <main-layout>
      <div class="list-container">
        <auth-tag code="13006|13007|13008" tips="无权访问">
          <vTable   ref="vGridTable"
                :columnsList="columnsList"
                addCode="13009"
                addText="新增角色"
                apiUrl="boss/role/role-company-list"
                :pageSize="15"
                :formConfig="formConfig"
                :toolbarConfig="false"
                @saveClick="openAdd"
                @switchChange="switchChange"
                :queryData="{
                  companyId:userStore.userInfo.companyId,
                  farmId:userStore.userInfo.farmId }">
                <template #actions="{row}">
                  <auth-tag code="13007">
                <el-button class="editBtn btn-eidt" icon="edit" size="small" @click="goEdit(row)">编辑</el-button>
              </auth-tag>
              <auth-tag code="">
                <el-button class="delBtn btn-del" icon="delete" size="small" @click="del(row)">删除</el-button>
              </auth-tag>
              <auth-tag code="13008">
                <el-button class="autoBtn btn-view" icon="Lock" size="small" @click="setAuth(row)">权限</el-button>
              </auth-tag>
                  </template>
            </vTable>
        </auth-tag>
        <add v-if="addFlag" v-model:show="addFlag" :title="editData.id?'编辑角色':'新增角色'" :edit-data="editData" @success="refreshTable" />
        <auth-set v-if="authFlag" v-model:show="authFlag" title="权限设置" :edit-data="editData" @success="refreshTable" />
      </div>
    </main-layout>

  </div>
</template>

<script setup name="System-Account-List">
import { nextTick, ref, watch, onActivated, reactive, computed,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {delRole, updateRoleStatus } from '@/api/system'
import mainLayout from '@/components/custom/mainLayout.vue'
import add from './components/add.vue'
import authSet from './components/authSet.vue'
import { useUserStore } from '@/pinia/modules/user'
import { ElMessageBox } from 'element-plus'
const router = useRouter()
const userStore = useUserStore()
onMounted(() => {
})

const vGridTable = ref(null)
const addFlag = ref(false)
const authFlag = ref(false)
const editData = ref({})

const  formConfig = computed(
    ()=>{
    return {
        titleWidth: 100,
        titleAlign: 'center',
        items: [
        {
            field: 'companyName',
            title: '公司',
            span: 5,
            itemRender: {name: '$input', props: {placeholder: '请输入公司', clearable: true}}
          },
          {
            field: '',
            title: '',
            span: 5,
            className:'from-right-btn-add',
            showTitle:false,
            slots: { default: 'addButtom' }
          },
          {
            align: 'center', collapseNode: false,
            itemRender: {
              name: '$buttons',
              children: [
                {props: {type: 'submit', icon: 'vxe-icon-search', content: '查询', status: 'primary'}},
                {props: {type: 'reset', icon: 'vxe-icon-refresh', content: '重置'}}
              ]
            }
          }
        ]
    }
   })

const columnsList = ref([
      {type: 'seq', title: '序号',width:'60',align:'center'},
      {field: 'roleName', title: '角色',minWidth:'110',align:'center'},
      {field: 'companyName', title: '公司',minWidth:'130',align:'center'},
      {field: 'isEnable',minWidth:'110', title: '状态',align:'center', slots:{default:'status-switch'}},
      {field: 'nick', title: '创建人',minWidth:'110',align:'center'},
      {field: 'createTime', title: '创建时间',minWidth:'110',align:'center'},
      {title: '操作', width: 240,fixed:'right', slots: {default: 'actions'}}
   ])



const switchChange =async (row)=>{
  await updateRoleStatus({id:row.id,isEnable:row.isEnable})
}

const refreshTable = () => {
  vGridTable.value.loadData()
}
const openAdd = () => {
  editData.value = {}
  addFlag.value = true
}


const goEdit = async(item) => {
  editData.value = JSON.parse(JSON.stringify(item))
  addFlag.value = true
}

const setAuth = async(item) => {
  // editData.value = JSON.parse(JSON.stringify(item))
  // authFlag.value = true
  router.push(`/set/role/set?id=${item.id}&roleCode=${item.roleCode}`)
}

const del = (item) => {
  ElMessageBox.confirm('确认删除吗?', '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async() => {
    const res = await delRole([item.id])
    if (res.code == 0) {
      refreshTable()
    }
  })
}

</script>

<style lang="scss" scoped>
.inputLine {
  display: flex;
  width: 300px;
  .zhi{
    padding: 0 10px;
  }
  s{
    font-style: normal;
    text-decoration: none;
    padding: 0 0 0 5px;
    color: var(--el-text-color-regular);
  }
}
</style>
